<template>
  <div class="commission-detail">
    <div v-if="calculationType === 2" class="tabs">
      <div
        v-for="(item, index) in tabList"
        :key="item"
        class="tab-item"
        :class="activeKey === index ? 'active' : ''"
        @click="changeTab(index)"
      >
        {{ item }}
      </div>
    </div>
    <e-container :style="{ padding: activeKey === 0 ? 0 : '24px' }">
      <newClients v-if="activeKey === 0 && calculationType === 2" />
      <existingClients v-if="activeKey === 1" />
    </e-container>
    <Teleport v-if="isMounted" to="#title-left-teleport-from-child">
      <div class="back-area">
        <span class="back" @click="handleBack">
          <e-icon type="Aright" color="#3c6cfe"></e-icon>
        </span>
        <div class="info">
          <div style="margin-right: 30px">
            Sales Personnel: <span>{{ displayName }}</span>
          </div>
          <div style="margin-right: 30px">
            Batch Number: <span>{{ paymentNum }}</span>
          </div>
          <div>
            Commission: <span>{{ currencyName }} {{ performance }}</span>
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// import receivedPayment from './components/receivedPayment.vue'
// import commissionRange from './components/commissionRange.vue'
import newClients from './components/newClients.vue'
import existingClients from './components/existingClients.vue'
import EIcon from '@/components/EIcon.vue'
import p from '@/api/performance.js'

const route = useRoute()
const router = useRouter()
const activeKey = ref(0)
const isMounted = ref(false)
const paymentNum = ref()
const currencyName = ref()
const performance = ref()
const displayName = ref()
const calculationType = ref()
const tabList = ref(['New Clients', 'Existing Clients'])

const handleBack = () => {
  router.push({
    path: '/sales-division/commission',
    query: {
      paymentNum: route.query.paymentNum
    }
  })
}
/**
 * 切换tab
 * @param index
 */
const changeTab = index => {
  activeKey.value = index
}
onMounted(() => {
  if (route.query) {
    p.getAdminPerformanceInfo({
      PaymentNum: route.query.paymentNum,
      EmpID: route.query.employee
    }).then(res => {
      if (res.code === 2000) {
        paymentNum.value = res.data.paymentNum
        currencyName.value = res.data.currencyName
        performance.value = res.data.performance
        displayName.value = res.data.displayName
        calculationType.value = res.data.calculationType
        if (calculationType.value === 1) {
          activeKey.value = 1
        }
      }
    })
  }
  isMounted.value = true
})
</script>

<style scoped lang="less">
.back-area {
  display: flex;
  align-items: center;
  //width: 500px;
  padding-top: 4px;
  .back {
    display: inline-block;
    border: 1px solid @border-color;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 22px;
    cursor: pointer;
    margin-right: 26px;
  }
  .info {
    display: flex;
    font-size: 14px;
    color: @text-gray;
    span {
      color: @black-85p;
    }
  }
}
.tabs {
  margin: 0 auto 24px;
  width: 270px;
  height: 40px;
  background-color: #fff;
  border-radius: 4px;
  display: flex;
  .tab-item {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: @text-black;
    box-shadow: 0 1px 3px @shadow-color;
    cursor: pointer;
  }
  .active {
    background-color: @primary-color;
    font-weight: 700;
    color: #fff;
    border-radius: 4px;
  }
}
</style>
<route lang="yaml">
name: SSS
path: /sales-division/commission/detail
</route>
